import { useState } from "react"
import TopNavict from "../compoments/TopNavict"
import login from "./styles/login.module.css"
import BottomBavict from "../compoments/bottomnav"
import { Checkbox } from 'antd'
import { message } from "antd"

const Login = () => {
    const [phone,setPhone] = useState("")
    const [password,setPassword] = useState("")
    const [checked, setChecked] = useState(true);
    const onChange = (e) => {
        setChecked(e.target.checked);
    };
    const [messageApi, contextHolder] = message.useMessage();
    const phoneChange = (e) => {
        setPhone(e.target.value)
    }
    const passwordChange = (e) => {
        setPassword(e.target.value)
    }
    function submit(){
        if(phone === "" || password === ""){
            messageApi.open({
                type: 'error',
                content: '请输入手机号和密码',
            });
        }else if(!checked){
            messageApi.open({
                type: 'error',
                content: '请勾选同意协议',
            });
        }
    }
    return (
        <div>
            {contextHolder}
            <TopNavict/>
            <div className={login.line}>
            </div>
            <div className={login.form}>
                <div className={login.head}>
                    <div className={login.head_img}>
                        <img src="https://jimucake.com/views/default/skin/default//images/images/yonghu_ico.png" alt="" />
                    </div>
                    <div className={login.txt}>
                        用户登录
                    </div>
                </div>
                <div className={login.body}>
                    <div className={login.input}>
                        <span className={login.phone}>手机号:</span>
                        <div>
                            <input className={login.input_a} value={phone} onChange={phoneChange} type="text" placeholder="" />
                        </div>
                    </div>
                    <div className={login.input}>
                        <span className={login.phone}>密码:</span>
                        <div>
                            <input className={login.input_a} value={password} onChange={passwordChange} type="text" placeholder="" />
                        </div>
                    </div>
                    <div className={login.option}>
                        <Checkbox onChange={onChange} /><span className={login.user_txt}>用户协议</span>
                    </div>
                    <div className={login.submit}>
                        <div onClick={submit}>
                            登录
                        </div>
                    </div>
                </div>
            </div>
            <BottomBavict />
        </div>
        
    )
}

export default Login